<template>
<!--    抽屉-->
  <el-drawer
    v-model='state.drawer'
    :size='400'
    :title='state.data.id'
  >
    <el-form ref='formRef' label-width='120px' label-position='left'>
      <template v-for='(item,index) in nodeType' :key='index'>
        <el-form-item v-if='item.field === "img"' :label='item.title'>
          <el-link type='primary'  @click='showLargeImage(state.data.data[item.field])'>{{ state.data.data[item.field] }}</el-link>
        </el-form-item>
        <el-form-item v-else-if='item.field === "video"' :label='item.title'>
          <el-link type='primary' @click='showVideo(state.data.data[item.field])'>{{ state.data.data[item.field] }}</el-link>
        </el-form-item>
        <el-form-item v-else-if='item.field === "ys"' :label='item.title'><span
          :style='{width: "20px", height: "20px",background: state.data.color}'/></el-form-item>
        <el-form-item v-else :label='item.title'><span>{{ state.data.data[item.field] }}</span></el-form-item>
      </template>
    </el-form>
  </el-drawer>
</template>

<script>
export default {
  name: 'NodeDetail',
  props: {
    detail: Object,
    nodeType: Array
  },
  emits: ['showLargeImage', 'showVideo'],
  setup(props, {emit}) {
    // eslint-disable-next-line vue/no-setup-props-destructure
    const state = props.detail
    const showLargeImage = (e) => {
      emit('showLargeImage',e)
    }
    const showVideo = (e) => {
      emit('showVideo',e)
    }
    return {
      state,
      showLargeImage,
      showVideo
    }

  }
}
</script>

<style>
.el-link--inner{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  width: 250px;
}

</style>
